<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>卖座电影</title>
    <link rel="stylesheet" href="src/index.css">
    <link rel="stylesheet" href="font_ly96itsh8vfjq0k9/iconfont.css">
    <link rel="stylesheet" href="src/swiper.min.css">
    <link rel="stylesheet" href="src/list.css">
    <link rel="stylesheet" href="src/grzx.css">
</head>
<body>
    <div id='box'>
        <div id="wrapper">
            <header class="head">
                    <div class="span1">
                        <i class="iconfont icon-qingdan"></i>
                        <div id="list">
                                <section> <span>首页 </span><i class="iconfont icon-youjian"></i></section>
                                <section> <span>影片 </span><i class="iconfont icon-youjian"></i></section>
                                <section><span>影院 </span><i class="iconfont icon-youjian"></i></section>
                                <section><span>商城 </span><i class="iconfont icon-youjian"></i></section>
                                <section><span>演出 </span><i class="iconfont icon-youjian"></i></section>
                                <section><span>我的 </span><i class="iconfont icon-youjian"></i></section>
                                <section><span>卖座卡 </span><i class="iconfont icon-youjian"></i></section>
                                <section style="border-bottom: none"><span> </span></section>
                                <section style="border-bottom: none"><span> </span></section>
                                <section style="border-bottom: none"><span> </span></section>
                                <section style="border-bottom: none"><span> </span></section>
                                <section style="border-bottom: none"><span> </span></section>
                        </div>
                    </div>
                    <div class="span2">卖座电影</div>
                    <div class="span3">深圳 <i class="iconfont icon-xiajian"></i></div>
                    <div class="span4">
                        <i class="iconfont icon-gerenzhongxin"></i>
                        <div class="grzx">
                            <input type="text" placeholder="请输入手机号/邮箱">
                            <div></div>
                            <input type="text" placeholder="请输入密码/验证码">
                            <div></div>
                            <button>登录</button>
                        </div>
                    </div>
            </header>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for='item in lunbolist'>
                        <img :src="item.imageUrl" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div> 
    <script src="src/jquery.min.js"></script>
    <script src="src/common.js"></script>
    <script src="src/swiper.min.js"></script>
    <script src="src/axios.min.js"></script>
    <script src='./node_modules/_vue@2.3.3@vue/dist/vue.min.js'></script>
    <script>

        new Vue({
            el:'#box',
            data:{
                lunbolist:''
            },
            mounted(){
                var that =this;
                 $.get('http://127.0.0.1:3000/lunbo',function (res) {
                    that.lunbolist=res.data.billboards;
                    console.log(that.lunbolist);
                    that.$nextTick(()=>{//获取更新后的dom元素
                         new Swiper ('.swiper-container', {
                        direction: 'horizontal',
                        loop: true
                        });
                    })
                })
            }
        })

      

//        $('.span1').click(function () {
//            $('.list').show();
//            $('.span1').click(function () {
//                $('.list').hide();
//            })
//        })
        $('.span1').click(function () {
            if($('.span1').hasClass('active')){
                $('.span1').removeClass('active');
                $('#list').css('left','-4rem');
            }else{
                $('.span1').addClass('active');
                $('#list').css('left','0')
            };
        });
    </script>
</body>
</html>